<template>
  <view class="myMarket">
    <classifyHead title="我的市场" />
    <view class="content">
      <div class="share">
        <view class="share-count">
          <view style="font-size: 46rpx;">分享好友人数</view>
          <view style="font-size: 46rpx;">2人</view>
        </view>
        <view class="price">
          <view>上期团队可竟购积分总额 </view>
          <view style="margin-top: 10rpx">0.00</view>
        </view>
        <view class="price">
          <view>本期团队可竟贮积分总额</view>
          <view style="margin-top: 10rpx"> 0.00 </view>
        </view>
        <view class="prev">
          <view>昨日是否预约</view>
        <view :style="{ color: isYesterdayBooked ? '#8ed94f' : '#d5a25d' }">{{ isYesterdayBooked ? '是' : '否' }}</view>
        </view>
      </div>
      <view class="footer">
        <view class="left">
          <view>2025-08-159</view>
          <view style="margin: 10rpx 0">ID:6587451</view>
          <view>1898689889</view>
        </view>
        <view class="right">
          <view style="display: flex;text-align: right;margin-left: 170rpx;;">
          <view>昨天预约:</view>
           <view :style="{ color: isYesterdayBooked ? '#8ed94f' : '#d5a25d' }">{{ isYesterdayBooked ? '是' : '否' }}</view>
           </view>
          <view style="margin-top: 40rpx;">总交易: <text style="color: red;"> 4587748741.84</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
</script>

<style lang="scss" scoped>
.myMarket {
  .content {
    padding: 0 20rpx;
    .share {
      width: 100%;
      border-radius: 30rpx;
      height: 450rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      margin-top: 20rpx;
      .share-count {
        width: calc(100% - 40rpx);
        background: #d19848;
        height: 110rpx;
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: aliceblue;
        padding: 0 20rpx;
      }
      .price {
        width: 100%;
        text-align: center;
        margin-top: 30rpx;
      }
      .prev {
        padding: 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .footer {
      margin-top: 20rpx;
      width: calc(100% - 40rpx);
      padding: 20rpx;
      height: 150rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      border-radius: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>